<template>
  <div class="detailBox" ref="detailBox">

    <!-- 顶部通栏 -->
    <div class="top" ref="top">
      <van-nav-bar title="标题" left-arrow>
      <template #left>
        <van-icon name="arrow-left" @click="$router.push('/home')"/>
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
      <template #title>
       <ul class="index">
        <li><a href="#desc">规格</a></li>
        <li><a href="#address">地址</a></li>
        <li><a href="#pl">评论</a></li>
       </ul>
      </template>
    </van-nav-bar>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
      <detail-banner :banners="goodInfo.banner"></detail-banner>
    </div>

    <!-- 具体内容 -->
    <div class="content">
      <div class="desc" id="desc">规格</div>
      <div class="address" id="address">地址</div>
      <div class="pl" id="pl">评论</div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom">
    <van-action-bar class="bar">
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="shop-o" text="店铺"/>
      <van-action-bar-button type="warning" text="加入购物车" @click="addcartHandler"/>
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  
  </div>
  </div>

</template>
<script setup lang="ts">
import { showSuccessToast, showFailToast } from 'vant'
import { getAddCart } from '../../request/cart'
import detailBanner from './component/banner.vue'
import { getGoodInfo } from '../../request/goods.ts'
import { ref, onMounted } from 'vue'
import { useRoute , useRouter} from "vue-router";
const $route = useRoute()
const detailBox = ref()
const top = ref()
const $router = useRouter()
const proid = $route.query.proid as string
// 顶部导航栏
const scrollHandler = () => {
  const scrollTop = detailBox.value.scrollTop
  const ele = top.value
  if (scrollTop < 200){
    const opacity: number = scrollTop / 200
    ele.style.opacity = opacity
  }else{
    ele.style.opacity = 1
  }
}
interface Res{
  code?: string
  data?: number
}

interface Reponse{
  code?: string,
  data?: {
    brand?: string,
    desc?: string,
    category?: string,
    img1?: string,  
    proid?: string,
    [key: string]: any
  }
}
// 加入购物车
const addcartHandler = async () => {
  const userid = window.localStorage.getItem('user_id') || ''

  if(!userid){
    showFailToast('您没有登录')
    return
  }
  const res = await getAddCart(userid,proid,'1')
  if( (res as Res).code !== '200'){
    showFailToast('您没有登录')
    return
  }
  showSuccessToast('成功加入购物车')
}

// 商品信息
const goodInfo = ref({banner: []})

// 获得产品详细信息
const getGoodsInfo = async () => {
  const res = await getGoodInfo(proid)
  if( (res as Reponse).code !== '200' ) return
  res.data.banner = []
  res.data.banner.push(res.data.img1, res.data.img2, res.data.img3, res.data.img4)
  goodInfo.value = res.data
}

onMounted( () => {
  detailBox.value.addEventListener('scroll', scrollHandler)
 getGoodsInfo()
})
</script>
<style scoped lang="scss">
html{
  scroll-behavior: smooth;
}
ul{
  display: flex;
  justify-content: space-between;
  li{
    margin-right: 10px;
    font-size: 18px;
    color: #000;
  }
}
.detailBox{
  padding-bottom: 50px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  overflow: auto;
  height: 100%;
  position: relative;
}
.top{
  position: fixed;
  width: 100%;
  top: 0;
}
.content {
  .desc{
    background-color: aqua;
    height: 500px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .address{
    background-color: pink;
    height: 500px;
    margin-bottom: 10px;
  }
  .pl{
    height: 500px;
    background-color: skyblue;
  }
  >div{
    width: 100%;
    border-radius: 10px;
  }
}
.detailBox{
  position: relative;
}
.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>
